<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>Title</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/index.css">
  <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
</head>
<body>


<div id="app">

  <div class="layui-container">
    <div class="status" v-if="isShow"> <span>你的bmi值为:{{ currentData.bmi }} 身体状态:{{ currentData.status }}</span> </div>
    <div class="layui-form-item">
      <label class="layui-form-label">身高</label>
      <div class="layui-input-inline">
        <input
          type="text"
          placeholder="请输入身高"
          v-model="formData.height" class="layui-input">
      </div>
      <div class="layui-form-mid layui-word-aux">单位：cm</div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">体重</label>
      <div class="layui-input-inline">
        <input
          type="text"
          placeholder="请输入体重"
          v-model="formData.weight" class="layui-input">
      </div>
      <div class="layui-form-mid layui-word-aux">单位：kg</div>
    </div>
    <button
      @click="calc"
      class="layui-btn">立即计算</button>
    <div class="Bmi-wrp">
      <table>
        <tr
          v-for="item of statusData"
          :style="{ backgroundColor: item.bg }"
        >
          <td><i v-if="currentData.status === item.key ? isBlock = true : isBlock = false"><svg t="1625562528102" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2386" width="20" height="20"><path d="M792.413 511.827l-48.76299999999999-48.79300000000001-0.20900000000000005 0.2069999999999999-463.0909999999998-463.1290000000001-48.763000000000005 48.762999999999984 463.0959999999999 463.12600000000003-463.0960000000001 463.1299999999998 48.76299999999999 48.75700000000001 512.0620000000001-512.0609999999998zM792.413 511.827z" p-id="2387" fill="red"></path></svg></i></td>
          <td style="width: 30%; text-align: left">{{item.key}}</td>
          <td style="width: 50%;">{{item.value}}</td>
        </tr>
      </table>
    </div>

    <table class="DarkLines">
      <tbody>
      <tr class="FieldTitle">
        <td>#</td>
        <td>日期</td>
        <td>身高</td>
        <td>体重</td>
        <td>BMI</td>
        <td>操作</td>
      </tr>
      <tr class="null" v-if="todos.length === 0">
        <td colspan="6">暂无数据</td>
      </tr>
      <tr v-else class="FieldBody" v-for="(item ,index) of todos">
        <td>{{ index + 1 }}</td>
        <td>{{formatDate(item.createdAt)}}</td>
        <!--      <td>{{item.createdAt}}</td>-->
        <td>{{ item.height }}</td>
        <td>{{ item.weight }}</td>
        <td>{{ item.bmi }}</td>
        <td><a @click="del(item.objectId)" href="javascript:void (0)" :style="{color}" title="删除">删除</a></td>
      </tr>
      </tbody>
    </table>



  </div>


</div>


<script src="js/vue.js"></script>
<script type="module">

  import ajax from "./js/index.js";

  let app = new Vue({
    el:'#app',
    data:{
      isBlock: false ,
      isShow: false,
      formData:{
        height:'',
        weight:'',
      },
      color:'red',
      todos: [],
      currentData: {
        status: '',
        bmi: ''
      },
      statusData: [
        { key: '分类', value: 'BMI 范围', bg: 'lightblue' },
        { key: '偏瘦', value: '<= 18.4', bg: 'gray' },
        { key: '正常', value: '18.5 ~ 23.9', bg: 'green' },
        { key: '过重', value: '24.0 ~ 27.9', bg: 'yellow' },
        { key: '肥胖', value: '>= 28.0', bg: 'orange' },
      ],
    },
    created(){
      this.getTodos()
    },
    methods:{

      // 获取数据
      getTodos(){
        ajax({
          url: 'https://veihwwnelcwq.leanapp.cn/bmi'
        }).then(res => {
          this.todos = res.data
        })
      },

      // 计算bmi
      calc(){
        ajax({
          url:'https://veihwwnelcwq.leanapp.cn/bmi',
          method:'POST',
          data: this.formData,
        }).then(res => {
            this.currentData = res.data
            this.getTodos()
            this.isShow = true
            // console.log(res)
          }
        )
      },

      // 删除数据
      del(id){
        if (confirm('你确定删除数据吗？')){
          fetch('https://veihwwnelcwq.leanapp.cn/bmi', {
            method: 'DELETE',
            headers: {
              'content-type': 'application/json'
            },
            body: JSON.stringify({
              id: id
            })
          })
          .then(res => res.json())
          .then(res => {
            this.getTodos()
            // console.log(res)
          })
        }
      },

      // 转换时间
      formatDate(time) {
        let date = new Date(time)
        return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
      }
    },

  })
</script>
</body>
</html>